<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-08-21 17:16:33
 * @LastEditors: william
 * @LastEditTime: 2025-09-16 15:57:55
-->
<template>
  <CustomModal
    ref="refCustomModal"
    title="食材详情"
    v-model="visible"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <scroll-view
      class="scroll-content"
      scroll-y
      enable-flex
      :style="{
        'max-height': `calc(${refCustomModal.contentMaxHeight} - 30rpx - 24rpx - 28rpx - 30rpx)`
      }"
    >
      <view v-if="tableList.length" class="nw-table nw-table2">
        <view class="tr">
          <view class="th">食材名称</view>
          <view class="th" style="min-width: 120rpx">所需用量(克/g)</view>
          <view class="th">加工方式</view>
          <view class="th">投放食盒</view>
        </view>
        <view class="tbody">
          <view class="tr" v-for="row in tableList" :key="row">
            <view class="td">{{ row.ingredientName }}</view>
            <view class="td" style="min-width: 120rpx">{{ row.goal }}</view>
            <view class="td">
              {{
                g_options.getOptionText(
                  g_options.techniqueOptions,
                  row.timeOffset,
                  '--'
                )
              }}
            </view>
            <view class="td">{{ row.timeOffset }}</view>
          </view>
        </view>
      </view>
      <Emptylist v-else text="无食材数据..." />
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'IngredientDetail',
  inheritAttrs: false
})

const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  },
  stepList: {
    type: Array,
    default: () => []
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})

const refCustomModal = ref({})
const tableList = ref([])

onMounted(_ => {
  tableList.value = props.stepList.filter(
    item => item.ingredientType === 'material'
  )
})
</script>

<style lang="scss" scoped>
.scroll-content {
  margin-top: 28rpx;
}
</style>
